import router from '@/router'
import store from '@/store/'
// 引入加载效果进度条的包
import NProgress from 'nprogress' // 进度条插件
import 'nprogress/nprogress.css' // 进度条样式
// 引入 router 里面的所有的动态路由
// import { asyncRoutes } from '@/router'

const whiteList = ['/login', '/404'] // no redirect whitelist
router.beforeEach((to, from, next) => {
  // 一进入页面，就开启加载进度条：
  NProgress.start()
    // 有 token
  if (store.getters.token) {
    // 如果有 token 且在首页，重新访问登录页，不放行
    if (to.path === '/login') {
      next('/')
        // 加载完成后结束加载进度条
      NProgress.done()
    } else {
      // 在还没有进入页面，马上进入页面的时候，就获取用户信息
      // 先判断userInfo对象是不是空对象，判断方法：Object.keys() 方法获取对象的所有键，并返回一个数组
      if (Object.keys(store.getters.userInfo).length === 0) {
        // res 是 getUserInfo 方法里面的 promise 实例结果，即 userInfo
        store.dispatch('user/getUserInfo').then((res) => {
          // 解构出员工信息里的页面权限信息
          const {
            roles: { menus }
          } = res

          // 处理真正员工的页面权限
          store.dispatch('permission/filterRoutes', menus).then((newAsyncRoutes) => {
            router.addRoutes([
              ...newAsyncRoutes,
              { path: '*', redirect: '/404', hidden: true }
            ])
          })

          // 在这里可以拿到用户的权限，拿到权限之后，可以动态的新增路由
          // addRoutes 可以在 router 对象上新增路由， asyncRoutes 是引入的动态路由列表
          // 由于 layout 里面的 index.vue 的 this.$router.options.routes 只能取 创建 VueRouter 实例的时候传过去的路由
          // 通过 addRoutes 添加的路由，this.$router.options.routes 取不到，所以无法在侧边栏显示路由模块
          // 而 addRoutes 是异步的，因此添加的时候，刷新页面无法阻止下面 next() 的执行，会先从静态路由当中匹配，从而匹配到 404 页面，然后才能进入动态路由
          // 因此需要重新定义一下 next()
          // router.addRoutes(asyncRoutes)
          // 为了让用户看到对应的导航，就让用户重新在进入一次页面
          next({
            // path: to.path,
            // query: to.query,
            ...to,
            replace: true // 替换掉上次的浏览历史记录
          })
        })
      }
      next()
        // 加载完成后结束加载进度条
      NProgress.done()
    }
  } else { // 没有 token
    // 没有 token 且是访问白名单，放行
    if (whiteList.includes(to.path)) {
      next()
        // 加载完成后结束加载进度条
      NProgress.done()
    } else {
      // 其他情况不放行
      next({ path: '/login' })
        // 加载完成后结束加载进度条
      NProgress.done()
    }
  }
})

// 路由后置守卫：
router.afterEach((to, from) => {
  // 加载完成后结束加载进度条
  // 注意：当前置守卫中执行了 next() 后，是不会进入后置守卫的
  NProgress.done()
})
